﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Resources/Master.Master" AutoEventWireup="true" CodeBehind="RoomOccupancyReport.aspx.cs" Inherits="Assignment_3.Feature___Reports.RoomOccupancyReport" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">

        google.load("visualization", "1", { packages: ["table", "corechart"] });

        function drawChart() {


            //Line Chart
            var hdValue = document.getElementById("<%=hdData.ClientID%>").value;
            var response = $.parseJSON(hdValue);

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Period');
            data.addColumn('number', 'Number of Records');

            for (var i = 0; i < response.length; i++) {
                var row = new Array();
                row[0] = response[i].Period;
                row[1] = response[i].Percentage;
                data.addRow(row);
            }

            //Pie Chart
            var hdValue3 = document.getElementById("<%=hdData3.ClientID%>").value;
            var response3 = $.parseJSON(hdValue3);

            var data3 = new google.visualization.DataTable();
            data3.addColumn('string', 'Period');
            data3.addColumn('number', 'Occupancy');

            for (var i = 0; i < response3.length; i++) {
                var row = new Array();
                row[0] = response3[i].Period;
                row[1] = response3[i].Percentage;
                data3.addRow(row);
            }

            //Table
            var hdValue2 = document.getElementById("<%=hdData2.ClientID%>").value;
            var response2 = $.parseJSON(hdValue2);

            var data2 = new google.visualization.DataTable();
            //data2.addColumn('date', 'Date');
            data2.addColumn('string', 'RoomID');
            data2.addColumn('number', 'Days Occupied (Nights)');
            data2.addColumn('date', 'Check-in Date');
            data2.addColumn('date', 'Check-out Date');
            for (var i = 0; i < response2.length; i++) {
                var row = new Array();
                //row[0] = new Date(response2[i].Check_in);
                row[0] = response2[i].RoomNo;
                row[1] = parseInt(response2[i].Daysoccupied);
                row[2] = new Date(response2[i].Check_in);
                row[3] = new Date(response2[i].Check_out);
                data2.addRow(row);
            }


            var formatter_long = new google.visualization.DateFormat({ pattern: 'yyyy-MM-dd' });
            formatter_long.format(data2, 2);
            formatter_long.format(data2, 3);
            //formatter_long.format(data2, 0);

            var option = {
                'width': 700,
                'height': 300,
                'backgroundColor': '#F9F9F9',
                title: 'Room Occupancy Chart',
                vAxis: { title: 'Number of Rooms Occupied' },
                hAxis: { title: 'Period' }
            }

            var options2 = {
                title: 'My Daily Activities'

            };

            options2['page'] = 'enable';
            options2['pageSize'] = 5;
            //options['pagingSymbols'] = { prev: '  <  ', next: '  >  ' };
            options2['pagingButtonsConfiguration'] = 'auto';

            var options3 = {
                'legend': 'bottom',
                'title': 'Room Status',
                'backgroundColor': '#F9F9F9',
                'width': 300,
                'height': 300
            }

            chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, option);

            chart3 = new google.visualization.PieChart(document.getElementById('chart_div3'));
            chart3.draw(data3, options3);

            chart2 = new google.visualization.Table(document.getElementById('chart_div2'));
            chart2.draw(data2, options2);
        }

    </script>
    <script type="text/javascript">
        $(document).ready(drawChart);

    </script>
    <script type="text/javascript">
        function PrintPanel() {
            var panel = document.getElementById("<%=printPnl.ClientID %>");
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<html><head><title>DIV Contents</title>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(panel.innerHTML);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            setTimeout(function () {
                printWindow.print();
            }, 500);
            return false;
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div style="margin-top: 20px; margin-left: 3%; margin-right: 3%">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:Panel ID="printPnl" runat="server">
            <h1>Room Occupancy Report</h1>
            <asp:UpdatePanel ID="autoPanel" runat="server">
                <ContentTemplate>
                    <table class="auto-style1">
                        <tr>
                            <td style="vertical-align: top; text-align: left" class="auto-style2"><strong>View By</strong>:<br />
                                <asp:RadioButtonList ID="periodRbl" runat="server" AutoPostBack="True" OnSelectedIndexChanged="periodRbl_SelectedIndexChanged">
                                    <asp:ListItem Selected="True">Daily</asp:ListItem>
                                    <asp:ListItem>Weekly</asp:ListItem>
                                    <asp:ListItem Value="Monthly"></asp:ListItem>
                                </asp:RadioButtonList>
                            </td>
                            <td style="vertical-align: top; text-align: left">
                                <strong>Select Date Range:</strong><table class="auto-style1">
                                    <tr>
                                        <td style="vertical-align: top; text-align: right" class="auto-style3">Start Date:</td>
                                        <td class="auto-style3">
                                            <asp:TextBox ID="startdateTbx" runat="server" AutoPostBack="True" OnTextChanged="startdateTbx_TextChanged"></asp:TextBox>
                                            <ajaxToolkit:CalendarExtender ID="startdateTbx_CalendarExtender" runat="server" Format="yyyy-MM-dd" TargetControlID="startdateTbx" TodaysDateFormat="yyyy-MM-dd">
                                            </ajaxToolkit:CalendarExtender>
                                            <asp:RequiredFieldValidator ID="startdateVld" runat="server" ControlToValidate="startdateTbx" Display="Dynamic" ErrorMessage="Please enter a Start Date First" ForeColor="Red"></asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="vertical-align: top; text-align: right">End Date:</td>
                                        <td>
                                            <asp:TextBox ID="enddateTbx" runat="server" Style="margin-top: 0px"></asp:TextBox>
                                            <ajaxToolkit:CalendarExtender ID="enddateTbx_CalendarExtender" runat="server" Format="yyyy-MM-dd" TargetControlID="enddateTbx">
                                            </ajaxToolkit:CalendarExtender>
                                            <asp:RequiredFieldValidator ID="enddateVld" runat="server" ControlToValidate="enddateTbx" Display="Dynamic" ErrorMessage="Please enter a End Date" ForeColor="Red"></asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="vertical-align: top; text-align: right"></td>
                                        <td>
                                            <asp:Label ID="emptyLbl" runat="server" ForeColor="Red"></asp:Label>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </ContentTemplate>
            </asp:UpdatePanel>

            <br />

            <asp:Button ID="SearchBtn" runat="server" Text="Search" OnClick="SearchBtn_Click" />
            <br />
            <br />
            <asp:Panel ID="chartPanel" runat="server">
                <table class="auto-style1">
                    <tr>
                        <td>
                            <div id="chart_div"></div>
                        </td>
                        <td>
                            <div id="chart_div3"></div>
                        </td>
                    </tr>
                </table>
                <div id="chart_div2"></div>
                <asp:HiddenField ID="hdData" runat="server" />
                <asp:HiddenField ID="hdData2" runat="server" />
                <asp:HiddenField ID="hdData3" runat="server" />
                <br />
                <asp:Button ID="printBtn" runat="server" OnClientClick="return PrintPanel();" Text="Print Preview" />
            </asp:Panel>
        </asp:Panel>
    </div>
</asp:Content>
